/* *选择器，选取所有标签，通配符选择器 */
* {
    /* 外边距 */
    margin: 0;
    /* 内边距 */
    padding: 0;
    /* 通过box-sizing属性修改浏览器的行为，使边框不再撑大盒子 */
    box-sizing: border-box;
}

 /* 设置整体页面高度 */
 /* 并集选择器，用于选择多组标签 */
html,body {
    height: 100%;
    /* 背景图片 */
    background-image: url(../image/dog.jpg);
    /* 背景位置 */
    background-position: center center;
    /* 背景尺寸，cover把背景图像扩展至足够大，使背景图片覆盖背景区域 */
    background-size: cover;
    /* 背景平铺，no-repeat不平铺 */
    background-repeat: no-repeat;
}

/* 上方导航栏 */
/* .nav类选择器，差异化表示不同的标签，可以让多个标签都使用同一个标签 */
.nav{
    /* 宽 */
    width: 100%;
    /* 高 */
    height: 50px;
    background-color: rgba(51, 51,51,0.4);
    /* 设置文本颜色，R，G，B三色各是0-255范围，16进制就是00-ff */
    color: #fff;
    /* 规定元素应该生成的框的类型，flex弹性布局， */
    display: flex;
    /* ，设置主轴上的子元素的排列方式，位于容器的左边 */
    justify-content: left;
    /* 项目位于容器的中央 */
    align-items: center;
}

/* 导航栏中的图标 */
.nav img{
    width: 40px;
    height: 40px;
    /* 左边距和右边距 */
    margin-left: 30px;
    margin-right: 10px;
    /* 设置外边框的圆角 */
    border-radius: 50%;
}

/* 导航栏中的占位器 */
/* 类选择器 */
.nav .spacer{
    width: 70%;
}

/*导航栏中的按钮 */
.nav a{
    color: #fff;
    text-decoration: none;
    /* 内边距， */
    padding: 0 10px;
}

/* 页面内容容器，版心 */
.container {
    /* 使用calc计算高度 */
    height: calc(100% - 50px);
    /* 设置版心宽度 */
    width: 1000px;
    /* 水平居中 */
    margin: 0 auto;
    /* 使用弹性布局 */
    display: flex;
    /* 设置主轴上子元素的排列方式 */
    /* 均匀排列每个元素，首个元素放置于起点，末尾元素置于终点 */
    justify-content: space-between;
    /* 项目位于容器的中央 */
    align-items: center;
}

/* 左侧部分，用来放置用户信息 */
.container-left {
    height: 100%;
    width: 200px;
}
/* 展示用户信息 */
.card {
    background-color: rgba(255,255,255,0.8);
    /* 设置元素的外边框圆角 */
    border-radius: 10px;
    padding: 30px;
}

/* 用户头像 */
/* 子集，img是.card的子集 */
.card img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
}

/* 用户名 */
.card h3 {
    /* 居中 */
    text-align: center;
    /* 内边距10px */
    padding: 10px;
}

/* 用户github地址 */
.card a{
    /* 改成块级元素 */
    display: block;
    /* 居中对齐 */
    text-align: center;
    color: #999;
    /* 文本修饰，none啥都没有 */
    text-decoration: none;
    padding: 10px;
}

/* 展示文章数目的面板 */
.card .counter {
    padding: 5px;
    /* 弹性布局，能够自由扩展和收缩，最大限度地填充可用空间 */
    display: flex;
    /* 设置主轴上子元素的排列方式 */
    /* 每个元素周围分配相同的空间 */
    justify-content: space-around;
}
/* 右侧部分，用来放置正文 */
.container-right {
    height: 100%;
    /* 和左侧部分中间留出5px间隙 */
    width: 795px;
    /* 如果内容溢出，则自己加上滚动条 */
    overflow: aoto;
    /* 设置元素的背景色 */
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
}
